<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>爱鲜蜂</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="libs/swiper.css">
        <script src="./libs/angular.js" charset="utf-8"></script>
        <script src="./libs/angular-ui-router.js" charset="utf-8"></script>
        <script src="libs/swiper.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <div class="container" ui-view></div>

        <div class="menu" ng-controller="MenuCtrl">
            <!-- <section>
                <img src="./static/imgs/home_select.png" alt="">
                <a ui-sref="home">首页</a>
            </section>
            <section>
                <img src="./static/imgs/market_normal.png" alt="">
                <a ui-sref="market">超市</a>
            </section>
            <section>
                <img src="./static/imgs/cart_normal.png" alt="">
                <a ui-sref="cart">购物车</a>
            </section>
            <section>
                <img src="./static/imgs/mine_normal.png" alt="">
                <a ui-sref="mine">我的</a>
            </section> -->

            <section ng-repeat="(i, item) in menuData" ng-click="changeMenuIndex()">
                <a ui-sref="{{ item.router }}">
                    <img ng-src="{{ (i == currentIndex) ? item.selectImg : item.normalImg }}" alt="">
                    <p>{{ item.title }}</p>
                </a>
            </section>
        </div>

    </body>
    <script type="text/javascript">
        !function(n) {
           var e = n.document,
               t = e.documentElement,
               i = 720,
               d = i / 100,
               o = "orientationchange" in n ? "orientationchange" : "resize",
               a = function() {
                   var n = t.clientWidth || 375;
                   n > 720 && (n = 720), t.style.fontSize = n / d + "px"
               };
           e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
       }(window);
    </script>
    <script type="text/javascript">
        // 获取整个应用程序
        var app = angular.module('App', ['ui.router'])
        window.app = app;
    </script>
    <script src="./router.js" charset="utf-8"></script>
    <script src="./servers.js" charset="utf-8"></script>
    <script src="./home/js/home.js" charset="utf-8"></script>
    <script src="./market/js/market.js" charset="utf-8"></script>
    <script src="./cart/js/cart.js" charset="utf-8"></script>
    <script src="./mine/js/mine.js" charset="utf-8"></script>
    <script type="text/javascript">

        app.controller('MenuCtrl', ['$scope', function ($scope) {
            $scope.currentIndex = 0;
            $scope.menuData = [
                {
                    title: '首页',
                    normalImg: './static/imgs/home_normal.png',
                    selectImg: './static/imgs/home_select.png',
                    router: 'home'
                }, {
                    title: '超市',
                    normalImg: './static/imgs/market_normal.png',
                    selectImg: './static/imgs/market_select.png',
                    router: 'market'
                }, {
                    title: '购物车',
                    normalImg: './static/imgs/cart_normal.png',
                    selectImg: './static/imgs/cart_select.png',
                    router: 'cart'
                }, {
                    title: '我的',
                    normalImg: './static/imgs/mine_normal.png',
                    selectImg: './static/imgs/mine_select.png',
                    router: 'mine'
                }
            ];
            $scope.changeMenuIndex = function () {
                $scope.currentIndex = this.$index;
            };
        }])

    </script>
</html>
